<template>
  <div class="course-week">
    <div class="week-top">
      <div class="btn_wrap">
        <el-button type="primary" plain @click="getLastWeek">上周</el-button>
        <el-button type="primary" plain @click="getCurWeek">本周</el-button>
        <el-button type="primary" plain @click="getNextWeek">下周</el-button>
      </div>
      <span class="todayDate"> {{ todayDate }}</span>
      <div class="chooseMonth" style="opacity: 0">
        <div>
          <span class="is_expired square"></span>
          <span class="title">已过期</span>
        </div>
        <div>
          <span class="in_progress square"></span>
          <span class="title">进行中</span>
        </div>
        <div>
          <span class="has_not_started square"></span>
          <span class="title">未开始</span>
        </div>
      </div>
    </div>
    <div class="week_table">
      <div class="table_header">
        <div class="table_date">
          <template v-for="(item,index) of months" :key="index">
            <span class="first" v-if="index===0">
              时段
            </span>
            <span v-else>
              <span class="day_item" :class="{'isCurDate':item&&item.isCurDate}">
                {{ item && item.showDate }} （{{proxy.$utils.getDayOfWeek(item.date)}}）
              </span>
            </span>
          </template>
        </div>
      </div>
      <div class="timePeriodList">
        <ul class="timePeriod_row">
          <!--循环时段，看时段有多少个-->
          <template v-if="timePeriodList.length>0">
            <li class="timePeriod_col" v-for="(period,p_index) in timePeriodList" :key="`period${p_index}`">
              <!--第一列显示时段-->
              <div class="timePeriod"> {{ period.timePeriod }}</div>
              <!-- 后面显示周一到周日的计划-->
              <div class="row_day">
                <!-- 循环显示每周的日期-->
                <template v-for="(month,m_index) of months">
                  <!-- v-if="month" 去除数据处理的时候移除数组第一个为empty的问题-->
                  <div v-if="month" :key="`month${m_index}`" class="things">
                    <!-- 循环每个时间段的计划-->
                    <template v-for="(thing,t_index) of period.things">
                      <!-- 根据日期和计划的日期匹配 显示 然后根据状态显示进行中 已过期 未开始-->
                      <div v-if="thing.date===month.date" :key="`thing${t_index}`" class="thing_item" @click="handleDetail(thing)" :style="thingItem(thing)">
                        <span>时段：{{ thing.timePeriod }}</span>
                        <span>班级名：{{ thing.course }}</span>
                        <span>授课老师：{{ thing.watchman }}</span>
                        <span>地点：{{ thing.place }}</span>
                      </div>
                    </template>

                  </div>
                </template>
              </div>
            </li>
          </template>
          <div class="noMore" v-else><span>暂无数据</span></div>
        </ul>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import MyTools from "@/utils/myTools.js";
let props = defineProps(["modelValue"]);
const { proxy } = getCurrentInstance();

let weeks = ref([
  "时段",
  "周日",
  "周一",
  "周二",
  "周三",
  "周四",
  "周五",
  "周六",
]);
let timePeriodList = ref([]);

let todayDate = ref("");
let months = ref([]);
let curDate = ref("");
let nowDate = ref(new Date());
let showCourseDetail = ref(false);

function thingItem(params) {
  return {
    background: params.color,
  };
}

function getWeek(time) {
  curDate.value = new Date(time);
  let weekList = getWeekDates(time);
  weekList.forEach((element) => {
    months.value.push({
      date: element,
      showDate: proxy.$utils.dateTimeFormateFn(element, "monthDate"),
      isCurDate: proxy.$utils.dateTimeFormateFn(time) == element,
    });
  });
  todayDate.value = `${months.value[1].date} ~ ${
    months.value[months.value.length - 1].date
  }`;

  function getWeekDates(date) {
    const dayOfWeek = date.getDay();
    const sundayDate = new Date(date);
    sundayDate.setDate(date.getDate() - dayOfWeek);

    const weekDates = [];
    for (let i = 0; i < 7; i++) {
      const currentDate = new Date(sundayDate);
      currentDate.setDate(sundayDate.getDate() + i);
      weekDates.push(proxy.$utils.dateTimeFormateFn(currentDate));
    }

    return weekDates;
  }
}

function addDate(date, n) {
  date.setDate(date.getDate() + n);
  return date;
}

// 日期格式处理
function formatDate(date) {
  var year = date.getFullYear();
  var months = date.getMonth() + 1;
  var month = (months < 10 ? "0" + months : months).toString();
  var day = (
    date.getDate() < 10 ? "0" + date.getDate() : date.getDate()
  ).toString();
  return { year, month, day };
}

//上周
function getLastWeek() {
  dealDate(addDate(curDate.value, -7));
}

//本周
function getCurWeek() {
  dealDate(new Date());
}

//下周
function getNextWeek() {
  dealDate(addDate(curDate.value, 7));
}

//显示当天日期状态
function dealDate(date) {
  months.value = [""];
  getWeek(date);
}

//点击查看详情
function handleDetail(row) {
  showCourseDetail.value = true;
}

watch(
  () => props.modelValue,
  (newValue, oldValue) => {
    if (newValue) {
      timePeriodList.value = newValue;
      getCurWeek();
    }
  },
  { deep: true, immediate: true }
);
</script>



<style scoped lang="scss">
$borderCoder: #eaedf2;
.course-week {
  width: 100%;
  padding: 1%;
  box-sizing: border-box;

  .week-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 40px;
    padding: 0 1%;

    .btn_wrap {
      width: 200px;
      display: flex;
      justify-content: space-around;
      color: #409eff;

      span {
        cursor: pointer;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 15px;
      }
    }

    .todayDate {
      font-weight: bold;
      font-size: 20px;
      color: #4196a2;
    }

    .chooseMonth {
      display: flex;
      justify-content: flex-end;
      width: 18%;

      div {
        flex: 1;
        display: flex;
        padding: 0 2%;
        white-space: nowrap;
        line-height: 20px;
        box-sizing: border-box;

        .square {
          display: flex;
          width: 16px;
          height: 16px;
          border-radius: 4px;
          box-sizing: border-box;
        }

        .title {
          display: flex;
          align-items: center;
          line-height: 16px;
          margin-left: 4px;
          font-size: 14px;
        }

        .in_progress {
          background: #ff6200;
        }

        .has_not_started {
          background: #3291f8;
        }

        .is_expired {
          background: #8e8e93;
        }
      }
    }
  }

  .week_table {
    display: flex;
    flex-direction: column;

    .table_header {
      width: 100%;
      background: #eaedf2;
      display: flex;
      flex-direction: column;
      align-items: center;
      border-bottom: 1px solid $borderCoder;
      box-sizing: border-box;

      .table_date,
      .table_week {
        width: 100%;
        height: 40px;
        text-align: left;
        display: flex;
        justify-content: center;
        align-items: center;

        span {
          flex: 1;
          color: #000;
          height: 100%;
          font-size: 14px;
          display: flex;
          justify-content: center;
          align-items: center;
          font-weight: bold;

          .day_item {
            color: #000;
            font-size: 14px;
            display: flex;
            justify-content: center;
            align-items: center;
          }
        }

        .first {
          cursor: pointer;

          i {
            margin-left: 1%;
            font-size: 16px;
            font-weight: bold;
          }

          &:hover {
            color: #0d9bf2;
          }

          //border-right: 1px solid $borderCoder;
        }
      }
    }

    .timePeriodList {
      width: 100%;

      .timePeriod_row {
        width: 100%;
        min-height: 60px;

        .timePeriod_col {
          width: 100%;
          min-height: 60px;
          display: flex;

          .timePeriod {
            width: 12.5%;
            display: flex;
            justify-content: center;
            align-items: center;
            border-left: 1px solid $borderCoder;
            border-bottom: 1px solid $borderCoder;
            box-sizing: border-box;
          }

          .row_day {
            width: 87.5%;
            display: flex;
            justify-content: center;

            .things {
              flex: 1;
              display: flex;
              flex-direction: column;
              align-items: center;
              border-left: 1px solid $borderCoder;
              border-bottom: 1px solid $borderCoder;
              box-sizing: border-box;

              &:last-child {
                border-right: 1px solid $borderCoder;
              }

              .thing_item {
                display: flex;
                font-size: 14px;
                flex-direction: column;
                justify-content: space-around;
                color: #fff;
                background: #ff6200;
                min-height: 90px;
                border-radius: 10px;
                margin: 2% 1%;
                padding: 1% 2%;
                cursor: pointer;
                box-sizing: border-box;
              }

              .waiting {
                background: #409eff;
              }

              .outdated {
                color: #fff;
                background: #9cadadb7;
              }
            }
          }
        }
      }
    }
  }
}

.isCurDate {
  color: #ff2525 !important;
}

ul,
li {
  margin: 0;
  padding: 0;
}

.noMore {
  min-height: 200px;
  padding: 2%;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid rgba(156, 173, 173, 0.3);
  color: #9cadadb7;
  box-sizing: border-box;
}
</style>
